/*
 * @Author: zyh
 * @Date: 2023-02-01 17:44:57
 * @LastEditors: zyh
 * @LastEditTime: 2023-02-03 14:27:07
 * @FilePath: /vite-project/src/views/proTable/useHooks1/index.tsx
 * @Description: login
 *
 * Copyright (c) 2023 by 穿越, All Rights Reserved.
 */
import './index.less';
import { Card } from 'antd';
import {
  ProForm,
  ProFormText,
  ProFormDateRangePicker,
  ProFormTextArea,
  ProFormDigit,
  ProFormRadio,
  ProFormDependency,
  ProFormSelect
} from '@ant-design/pro-components';
import type { ProFormProps } from '@ant-design/pro-components';

export default function BasicForm() {
  const onFinish: ProFormProps['onFinish'] = async values => {
    await new Promise(resolve => setTimeout(resolve, 2000));
    console.log(values);
  };

  return (
    <Card bordered={true} style={{ minHeight: '100%' }}>
      <ProForm hideRequiredMark style={{ margin: 'auto', marginTop: 8, maxWidth: 600 }} name="basic" onFinish={onFinish}>
        <ProFormText
          width="md"
          label="标题"
          name="title"
          rules={[
            {
              required: true,
              message: '请输入标题'
            }
          ]}
          placeholder="给目标起个名字"
        />
        <ProFormDateRangePicker
          name="date"
          label="起止日期"
          width="md"
          rules={[
            {
              required: true,
              message: '请选择起止日期'
            }
          ]}
          placeholder={['开始日期', '结束日期']}
        />
        <ProFormTextArea
          label="目标描述"
          width="xl"
          name="goal"
          rules={[
            {
              required: true,
              message: '请输入目标描述'
            }
          ]}
          placeholder="请输入你的阶段性工作目标"
        />
        <ProFormTextArea
          label="衡量标准"
          name="standard"
          width="xl"
          rules={[
            {
              required: true,
              message: '请输入衡量标准'
            }
          ]}
          placeholder="请输入衡量标准"
        />

        <ProFormText
          width="md"
          label={
            <span>
              客户
              <em style={{ color: '#666' }}>（选填）</em>
            </span>
          }
          tooltip="目标的服务对象"
          name="client"
          placeholder="请描述你服务的客户，内部客户直接 @姓名／工号"
        />

        <ProFormText
          width="md"
          label={
            <span>
              邀评人
              <em style={{ color: '#666' }}>（选填）</em>
            </span>
          }
          name="invites"
          placeholder="请直接 @姓名／工号，最多可邀请 5 人"
        />

        <ProFormDigit
          label={
            <span>
              权重
              <em style={{ color: '#666' }}>（选填）</em>
            </span>
          }
          name="weight"
          placeholder="请输入"
          min={0}
          max={100}
          width="xs"
          fieldProps={{
            formatter: value => `${value || 0}%`,
            parser: value => (value ? value.replace('%', '') : '0'),
            onChange: val => console.log(val)
          }}
        />

        <ProFormRadio.Group
          options={[
            {
              value: '1',
              label: '公开'
            },
            {
              value: '2',
              label: '部分公开'
            },
            {
              value: '3',
              label: '不公开'
            }
          ]}
          label="目标公开"
          help="客户、邀评人默认被分享"
          name="publicType"
        />
        <ProFormDependency name={['publicType']}>
          {({ publicType }) => {
            return (
              <ProFormSelect
                width="md"
                name="publicUsers"
                fieldProps={{
                  style: {
                    margin: '8px 0',
                    display: publicType && publicType === '2' ? 'block' : 'none'
                  }
                }}
                options={[
                  {
                    value: '1',
                    label: '同事甲'
                  },
                  {
                    value: '2',
                    label: '同事乙'
                  },
                  {
                    value: '3',
                    label: '同事丙'
                  }
                ]}
              />
            );
          }}
        </ProFormDependency>
      </ProForm>
    </Card>
  );
}
